<template lang="html" id="shouye">
<div class="shouye">
    <div class="banner">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="x of bannerData"><img v-bind:src="x.bannerimg"></div>
              </div>
              <div class="swiper-pagination swiper-pagination-white"></div>
          </div>
    </div>
    <div class="main">
        <div class="mouder">
            <a href="#" v-for="n in linkData">
                <img v-bind:src="n.sale_as[0].bannerimg">
            </a>
        </div>
        <div class="prolist" v-for="i in proData">
            <img v-bind:src="i.img">
            <div class="pro" v-for="m in i.goodslist">
                <router-link to="/show">
                    <div class="fl">
                        <div class="wdpro">
                          <img  v-bind:src="m.newimg" class="proImg"/>
                        </div>
                    </div>
                    <div class="fr">
                        <h3>{{m.main_name}}</h3>
                        <h4>{{m.title}}</h4>
                        <div class="jg-bq"><em>会员价:￥<strong>{{m.price}}</strong>/份&nbsp;&nbsp;</em></div>
                        <h5>{{m.price_info}}</h5>
                    </div>
                  <div class="clear"></div>
	              </router-link>
                <em class="add" @click="CartData(m)">+</em>
                <div class="moreicon3">
                      <span class="font" style="background-color:#ffffff;color:#ffd040;">{{m.category_tips.txt}}</span>
                  </div>
            </div>
            <img v-bind:src="i.more">
        </div>
    </div>
    <div class="goodslist">
        <div class="pro" v-for="j in itemData">
        <router-link to="/show">
              <div class="fl">
                  <div class="wdpro">
                    <img :src="j.icon" class="proImg"/>
                  </div>
              </div>
              <div class="fr">
                  <h3>{{j.real_name}}</h3>
                  <h4>{{j.title}}</h4>
                  <div class="jg-bq"><em>会员价:￥<strong>{{j.price}}</strong>/份&nbsp;&nbsp;</em></div>
                  <h5>{{j.price_info}}</h5>
              </div>
		          <div class="clear"></div>
	      </router-link>
	      <em class="add" @click="CartData(j)">+</em>
	      <div class="moreicon3">
            <span class="font" style="background-color:#ffffff;color:#ffd040;">{{j.main_name}}</span>
        </div>
        </div>
    </div>

</div>

</template>
<script>
  import Vue from "vue"
  import VueResource from "vue-resource"
  Vue.use(VueResource);
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import eventHub from '../router/bus.js';
  export default{
      data (){
          return{
            shouyeData:[],
            bannerData:[],
            proData:[],
            linkData:[],
            itemData:[]
          }
      },
      mounted (){
          this.$http.get("../static/shouye.json").then(function(res){
                this.shouyeData=JSON.parse(res.bodyText).data.blocks;
                this.bannerData=this.shouyeData[0][0].sale_as;
                this.linkData=this.shouyeData[1];
                this.proData=this.shouyeData[6];
                console.log(this.proData);
                this.$nextTick(function () {
                    var swiper = new Swiper('.swiper-container', {
                      pagination: '.swiper-pagination',
                      paginationClickable: true,
                      loop: true,
                      speed: 600,
                      autoplay: 2000,
                      onTouchEnd: function() {
                        swiper.startAutoplay()
                      }
                    });
                })
          });
          this.$http.get("../static/home2.json").then(function (res) {
                this.itemData=res.body.data.goods;
                console.log(this.itemData);
          })
      },
      methods : {
        CartData:function(m){
          eventHub.$emit("add",m);
          document.querySelector(".footer_allNum").style.display = "block";
        }
      }
  }
</script>
<style lang="css">
  .shouye{
      margin-bottom: 1rem;
  }
  .swiper-container {
    width: 100%;
    height: 7rem;
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  .swiper-slide img {
    width: 100%;
    height: 100%;

  }
  .swiper-pagination-bullet {
    width:0.833rem;
    height: 0.833rem;
    display: inline-block;
    background: #7c5e53;
  }
  .main{
      width: 100%;
  }
  .mouder{
      width: 100%;
      height: 7rem;
  }
  .mouder a{
    display: inline-block;
    width: 50%;
    height: 3.5rem;
  }
  .mouder a img{
      width: 100%;
      height: 3.5rem;
  }
  .main .prolist>img{
      width: 100%;
      height: 7rem;
  }
  .main .prolist>img:nth-of-type(2){
    width: 100%;
    height: 1.5rem;
  }
  .goodslist{
      margin-top: 0.5rem;
  }
   .pro{
      border-bottom: 0.02rem solid #cacaca;
      margin: 0.5rem 0 0 0;
      position: relative;
  }
   .pro .fl {
      width: 6rem;
      height: 5rem;
      margin: 0 0 0 2%;
  }
  .fl {
    float: left;
  }
   .pro .fr {
      width: 60%;
      margin: 0 2% 0 2%;

  }
  .fr {
    float: right;
  }
  .clear {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
  }
  .moreicon3 {
    margin: 0;
    padding: 0 0 0 0.05rem;
    border-top: 0.02rem dashed #cacaca;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: 1rem;
    color: #a3a6a8;
  }
  .wdpro {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .pro a img.proImg {
      width: 100%;
  }
  .moreicon3 img {
    width: 5rem;
    vertical-align: middle;
    margin: 0 0 0 0.5rem;
  }
  .pro .add {
    position:absolute;
    right: 0.5rem;
    bottom: 2rem;
    line-height: 2rem;
    height: 2rem;
    overflow: hidden;
    background: #ffd040;
    border-radius: 1rem;
    z-index:1;
    display: block;
    width: 2rem;
    color: #424644;
    text-align: center;
    cursor: pointer;
    font-style: normal;
    font-size: 1.5rem;
  }
   .pro .gw_num em {
    display: block;
    height: 2rem;
    line-height: 2rem;
    width: 1rem;
    float: left;
    color: #424644;
    text-align: center;
    cursor: pointer;
    font-style: normal;
    font-size: 1rem;
    text-indent: -9999px;
  }
  .shouye .pro .fr h3 {
    font-size: 1.2rem;
    color: #3e3d3d;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }
   .pro .fr h4 {
    font-size: 0.8rem;
    color: #a3a6a8;
    margin-top: 0.2rem;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }
   .pro a .jg-bq {
    font-size: 0.2rem;
    color: #fc6137;
    margin: 0.2rem 0 0 0;
    background: url("../assets/c_font_bg.png") no-repeat left center;
  }
   .pro a .jg-bq strong {
    font-size: 1rem;
  }
   .pro a h5 {
    font-size: 0.5rem;
    color: #424644;
  }
</style>
